<template>
	<el-container class="chat-page">
		<el-aside width="280px" class="chat-list-box">
			<div class="chat-list-header">
        <el-input class="search-text" placeholder="搜索" v-model="searchText">
          <template v-slot:prefix>
            <el-icon class="el-input__icon"><el-icon-search /></el-icon>
          </template>
        </el-input>
			</div>
			<div class="chat-list-loading" v-if="loading" v-loading="true" element-loading-text="消息接收中..."
				element-loading-spinner="el-icon-loading" element-loading-background="#eee">
				<div class="chat-loading-box"></div>
			</div>
			<el-scrollbar class="chat-list-items">
				<div v-for="(chat, index) in chatStore.chats" :key="index">
					<chat-item v-show="!chat.delete && chat.showName.includes(searchText)" :chat="chat" :index="index"
						@click.native="onActiveItem(index)" @delete="onDelItem(index)" @top="onTop(index)"
						:active="chat === chatStore.activeChat"></chat-item>
				</div>
			</el-scrollbar>
		</el-aside>
		<el-container class="chat-box middle-box">
			<chat-box v-if="chatStore.activeChat" :chat="chatStore.activeChat"></chat-box>
		</el-container>
	</el-container>
</template>

<script>
import ChatItem from "@/IM/components/chat/ChatItem.vue";
import ChatBox from "@/IM/components/chat/ChatBox.vue";
import { useChatStore } from "@/store/imModules/chatStore";
const chatStore = useChatStore();
export default {
	name: "chat",
	components: {
		ChatItem,
		ChatBox
	},
	data() {
		return {
			searchText: "",
			messageContent: "",
			group: {},
			groupMembers: [],
			radio: ''
		}
	},
	methods: {
		onActiveItem(index) {
			chatStore.getActiveChat(index);
		},
		onDelItem(index) {
			chatStore.removeChat(index);
		},
		onTop(chatIdx) {
			chatStore.moveTop(chatIdx);
		},
	},
	computed: {
		chatStore() {
			return useChatStore();
		},
		loading() {
			return chatStore.loadingGroupMsg || chatStore.loadingPrivateMsg
		}
	}
}
</script>

<style lang="scss">
.chat-page {
	height: 100%;

	.chat-list-box {
		display: flex;
		flex-direction: column;
		border-right: #53a0e79c solid 1px;
		background: white;
		width: 20%;

		.chat-list-header {
			padding: 3px 8px;
			line-height: 50px;
			border-bottom: 1px #ddd solid;

			.el-input__inner {
				border-radius: 10px !important;
				background-color: #F8F8F8;
			}

		}

		.chat-list-loading {
			height: 50px;
			background-color: #eee;

			.chat-loading-box {
				height: 100%;
			}
		}

		.chat-list-items {
			flex: 1;
			background: #F8F8F8;
			margin: 0 3px;
		}
	}
}

.data-info {
	height: calc(100vh - 200px);
	overflow: auto;
	padding-top: 30px;
	padding-left: 30px;
	text-align: left;

	.data-info-item {
		margin-bottom: 20px;
	}
}

.middle-box {
	max-width: 70%
}
</style>